<html>
  <head>
    <title>第一章</title>
  </head>
  <div>
    <form id='form'>
      <p>
        <label>用户：</label>
        <input name='username'/>
      </p>
      <p>
        <label>密码：</label>
        <input name='password'/>
      </p>
      <input type='submit' value='提交'/>
    </form>
    <script>
      // 不好的方式
      function checkUsername(){
        // TODO
      }
      function checkPassword(){
        // TODO
      }

      /*一下这些稍微好一些*/
      // 1、使用对象封装函数
      var CheckObject1 = {
        checkUsername: function(){
          // TODO
        },
        checkPassword: function(){
          // TODO
        }
      }

      // 2、对象的另一种形式
      var CheckObject2 = function(){}
      CheckObject2.checkPassword = function(){
        // TODO
      }
      CheckObject2.checkUsername = function(){
        // TODO
      }

      // 3、真假对象
      var CheckObject3 = function(){
        return {
          checkUsername: function(){},
          checkPassword: function(){}
        }
      }
      // 4、类的形式（其实真的算类吗）
      var CheckObject4 = function(){
        this.checkUsername = function(){}
        this.checkPassword = function(){}
      }
      var checkeObject4 = new CheckObject4()
      var checkeObject5 = new CheckObject4()
      console.log(checkeObject4, checkeObject5)

      // 5、方法还可以这样用
      // 这种方法返回的是this，可以链式调用对象内部的方法。如：CheckObject.checkUsername().checkPassword()
      var CheckObject = {
        checkUsername: function(){
          // TODO
          return this
        },
        checkPassword: function(){
          // TODO
          return this
        }
      }

      // 6、还有一种绑定到prototype的
      Function.prototype.checkUsername = function(){}
      // 然后就可以这样做调用了，但是这么做的话污染了原声对象的Function，别人创建的函数也会被你创建的函数污染
      // 造成不必要的开销
      var f = new Function()
      f.checkUsername()

      // 7、改进以上6、的方法
      Function.prototype.addMethod = function(name, fn){
        this[name] = fn
      }
      // 这样之后就可以
      var methods = new Function()
      methods.addMethod('checkUsername', function(){
        // 验证用户名的代码
      })
      methonds.checkUsername()

      // 8、还可以链式添加方法（其实就是比第七种方式，增加了返回this）
      Function.prototype.addMethod = function(name, fn){
        this[name] = fn
        return this
      }

    </script>
  </div>
</html>